<!DOCTYPE html>
<html>
 <head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入 Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/info.css" rel="stylesheet">
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
 </head>
 <body style="background:#f5f5f5">
   <div class="container col-xs-12 col-sm-8 col-sm-offset-2">
     <!--头部开始-->
     <header class="row" style="padding-bottom: 10px;background:#f5f5f5;">
       <nav class=""style="text-align:center; padding: 10px;">
         <div class="col-xs-4 col-xs-offset-4" style="font-size: 20px;">
           <a href="index.html" style="text-decoration:none;color:#333;">医疗问答</a>
         </div>
         <div class="col-xs-1 col-xs-offset-3">
             <img src="images\user.png" style="width:28px; height:28px;">
          </div>
       </nav>
     </header><!--头部结束-->
      <!--症状详细信息开始-->
      <div class="row symptom-big-box">
        <!--症状概述-->
        <div class="row symptom-small-box">
          <div class="row symptom-title" id="symptom">
          </div>
          <div class="row symptom-txt" id="brief">
          </div>
          <div class="row center-text symptom-more" id="symptom-more">
            <span class="glyphicon glyphicon-chevron-down"></span>
          </div>
        </div>
        <!--病因-->
        <div class="row symptom-small-box">
          <div class="row symptom-title">
            病因
          </div>
          <div class="row symptom-txt" id="cause">
          </div>
          <div class="row center-text symptom-more" id="symptom-more">
            <span class="glyphicon glyphicon-chevron-down"></span>
          </div>
        </div>
        <!--检查-->
        <div class="row symptom-small-box">
          <div class="row symptom-title">
            检查
          </div>
          <div class="row symptom-txt" id="check">
          </div>
          <div class="row center-text symptom-more" id="symptom-more">
            <span class="glyphicon glyphicon-chevron-down"></span>
          </div>
        </div>
        <!--诊断-->
        <div class="row symptom-small-box">
          <div class="row symptom-title">
            诊断
          </div>
          <div class="row symptom-txt" id="diagnose">
          </div>
          <div class="row center-text symptom-more" id="symptom-more">
            <span class="glyphicon glyphicon-chevron-down"></span>
          </div>
        </div>
        <!--预防-->
        <div class="row symptom-small-box">
          <div class="row symptom-title">
            预防
          </div>
          <div class="row symptom-txt" id="prevent">
          </div>
          <div class="row center-text symptom-more" id="symptom-more">
            <span class="glyphicon glyphicon-chevron-down"></span>
          </div>
        </div>
        <!--可能患有的疾病-->
        <div class="row symptom-small-box">
          <div class="row symptom-title">
            可能患有的疾病
          </div>
          <div class="row" id="r_disease">
          </div>
        </div>
        <!--常见症状-->
        <div class="row symptom-small-box">
          <div class="row symptom-title">
            常见症状
          </div>
          <div class="row" id="r_symptom">
          </div>
        </div>
      </div><!--症状详细信息结束-->
      <!--footer开始-->
      <footer class="row text-center" style="background:#333; height:50px; color:white;padding:20px">
        <p>2020</p>
      </footer>

      <div class="goTop">
          <span class="glyphicon glyphicon-chevron-up"></span>
      </div>
      <!--footer结束-->
    </div>
 </body>
 <script type="text/javascript" src="js\info.js"></script>
 <script type="text/javascript" src="js\symptom.js"></script>
 <script type="text/javascript">
    function getSymptomInfo(symptom_info){
     symptomInfo(symptom_info);
    }
    getSymptomInfo(symptom_info);
 </script>
 <!--展开更多开始-->
 <script type="text/javascript">
   $('.symptom-more').click(function(){  //点击展开全部
     $(this).prev().toggleClass("symptom-txt symptom-txt-auto");
		 $(this).children('span').toggleClass("glyphicon-chevron-down glyphicon-chevron-up");
 })
 </script><!--展开更多结束-->
 <!--返回顶部开始-->
 <script type="text/javascript">
     function goTop(min_height) {
         $(".goTop").click(
             function() {
                 $('html,body').animate({
                     scrollTop: 0
                 }, 700);
             });
         //获取页面的最小高度，无传入值则默认为600像素
         min_height=min_height?min_height:400;
         //为窗口的scroll事件绑定处理函数
         $(window).scroll(function() {
             //获取窗口的滚动条的垂直位置
             var s = $(window).scrollTop();
             //当窗口的滚动条的垂直位置大于页面的最小高度时，让返回顶部元素渐现，否则渐隐
             if (s > min_height) {
                 $(".goTop").fadeIn(100);
             } else {
                 $(".goTop").fadeOut(200);
             }
         });
     }

     $(function() {
         goTop();
     });
 </script><!--返回顶部结束-->
</html>
